<template>
  <div id="app">
    <!-- 可以点击控制台performance录制，查看性能，还可以指定时间轴的开始结束，滑动那个竖线，可以看到这段时间的信息 -->
    <button @click="loadNormalDatas">load normal datas</button>
    <button @click="loadFrozenDatas">load frozen datas</button>
    <h1>normal datas count: {{ normalDatas.length }}</h1>
    <h1>freeze datas count: {{ freezeDatas.length }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      normalDatas: [],
      freezeDatas: [],
    };
  },
  methods: {
    loadNormalDatas() {
      this.normalDatas = this.getDatas();
      console.log("normalDatas", this.normalDatas);
    },
    loadFrozenDatas() {
      // 冻结的对象是不能给它的属性重新赋值的，但是变量是可以的
      /**
       * var a = {name: 'a', age: 18};
       * Object.freeze(a);
       * a.name = 'b'; // 不能修改
       * a = 1; // 变量可以重新赋值
       * 还可以冻结一个数组，调用数组push会报错
       */
      this.freezeDatas = Object.freeze(this.getDatas());
      console.log("freezeDatas", this.freezeDatas);
    },
    getDatas() {
      const result = [];
      for (var i = 0; i < 1000000; i++) {
        result.push({
          id: i,
          name: `name${i}`,
          address: {
            city: `city${i}`,
            province: `province${i}`,
          },
        });
      }
      return result;
    },
  },
};
</script>

<style>
#app {
  text-align: center;
}
</style>
